$(document).ready(function () {
            $.ajax({
                url: 'http://127.0.0.1:5000/', // 后端根路由
                type: 'get',
                success: function (res) {
                    $("#getResult").hide();
                    
                    if (!Array.isArray(res) || !res.length) {
                        $("#getResult").text('没有可用的电影数据！').show();
                        console.log('实际数据：', res);
                        return;
                    }

                    const timingCounts = {};
                    res.forEach(item => {
                        const timing = item.timing;
                        if (timing >= 140 && timing <= 170) {
                            timingCounts[timing] = (timingCounts[timing] || 0) + 1;
                        }
                    });

                    const timingLabels = [];
                    const movieCounts = [];
                    const step = Math.floor((170 - 140) / 6);
                    for (let t = 0; t <= 7; t++) {
                        const i = 140 + t * step;
                        timingLabels.push(i.toString());
                        movieCounts.push(timingCounts[i] || 0);
                    }

                    // 创建渐变背景色
                    const ctx = document.getElementById('myChart').getContext('2d');
                    const gradient = ctx.createLinearGradient(0, 0, 0, 400); // 垂直渐变，高度可调
                    gradient.addColorStop(0, 'rgba(54, 162, 235, 0.8)'); // 顶部颜色 (蓝色，透明度高)
                    gradient.addColorStop(1, 'rgba(237, 243, 248, 0.02)'); // 底部颜色 (蓝色，透明度低)

                    // 创建折线图 (面积图)
                    new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: timingLabels,
                            datasets: [{
                                label: '电影数量',
                                data: movieCounts,
                                fill: true, // 启用填充，以便使用渐变背景色
                                borderColor: 'rgba(54, 162, 235, 1)', // 折线颜色
                                backgroundColor: gradient, // 应用渐变背景色
                                tension: 0.4, // 平滑曲线，可调
                                pointRadius: 4,
                                pointHoverRadius: 6
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    display: false
                                },
                                title: {
                                    display: false
                                },
                                tooltip: {
                                    callbacks: {
                                        title: function (context) {
                                            return '时长: ' + context[0].label;
                                        },
                                        label: function (context) {
                                            return '电影数量: ' + context.parsed.y;
                                        }
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    title: {
                                        display: true,
                                        text: '电影数量',
                                        color: '#ffffff' ,
                                        align: 'center'
                                    },
                                    grid: {
                                        color: 'rgba (255, 255, 255, 0.1)'  // 网格线颜色调整为半透明白色
                                    },
                                    ticks: {
                                        precision: 0,
                                        color: '#ffffff' 
                                    }
                                },
                                x: {
                                    title: {
                                        display: true,
                                        text: '时长（分钟）',
                                        color: '#ffffff',
                                        align: 'end' 
                                    },
                                    grid: {
                                        color: 'rgba (255, 255, 255, 0.1)'  // 网格线颜色调整为半透明白色
                                    },
                                    ticks: {
                                        autoSkip: false,
                                        maxRotation: 30,
                                        minRotation: 15,
                                        color: '#ffffff' 
                                    }
                                }
                            }
                        }
                    });
                },
                error: function (xhr, status, error) {
                    $("#getResult").text("请求失败：" + error).show();
                }
            });
        });